@import "base.scss";
@import "mixin.scss";

//SY-setContent
.SY-setContent {
  .headBox {
    width: 100%;
    height: 20 * $fontSize10;
    background: url("../img/personalCenter/payBg.png") no-repeat center;
    background-color: $colore5;
  }
  .mainBox {
    margin:(- 10 * $fontSize10) auto 18 * $fontSize10;
    .content {
      width: 100 * $fontSize10;
      margin:0 auto;
      background: $colorfff;
      @include border(1px,solid,$colore5);
    }
  }
  .S-main {
    padding: 4 * $fontSize10;
    .titleBox {
      font-size: $fontSize20;
      color: $color333;
      margin-bottom: $fontSize20;
    }
    .courseMsg {
      padding: $fontSize18 2 * $fontSize16;
      @include border(1px,solid,$colore5);
      .courseName {
        font-size: $fontSize16;
        color: $color333;
        max-width: 50 * $fontSize10;
        margin:$fontSize12 / 4 5 * $fontSize10 0 0;
        line-height: $lineHeight;
      }
      .avatar {
        width: 3 * $fontSize10;
        height: 3 * $fontSize10;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .nickName {
        font-size: $fontSize14;
        margin:$fontSize12 / 3 0 0 $fontSize12 / 2;
        line-height: $lineHeight;
        color: $color333;
      }
    }
    .description {
      padding: 3 * $fontSize10 2 * $fontSize16;
      margin-bottom: $fontSize20;
      font-size: $fontSize14;
      line-height: $lineHeight;
      color: $color666;
      background: #f8fafc;
      .text {
        width: 71 * $fontSize10;
      }
      .price {
        font-size: $fontSize16;
        font-weight: 700;
        color: $colorred;
      }
    }
    .payWays {
      overflow: hidden;
      @include border(1px,solid,$colore5);
      .chooseTab {
        background: #f4f4f4;
        li {
          display:inline-block;
          &.active{
            background: $colorfff;
          }
        }
        a {
          display: block;
          width: 10 * $fontSize10 + 5;
          height: 5 * $fontSize10;
          line-height: 5 * $fontSize10;
          font-size: $fontSize16;
          color: $color333;
          text-align: center;
          > i {
            display: inline-block;
            height: $fontSize20;
            width: $fontSize12;
            background: url("../img/icons/smallCircle.png") 0 $fontSize12 / 2 no-repeat;
          }
        }
      }
      .couponBox {
        max-height: 36 * $fontSize10 + 7;
        overflow-x: hidden;
        overflow-y: auto;
        .valid {
          margin:$fontSize20 $fontSize10 0;
          min-height: 10 * $fontSize16;
        }
        .invalid {
          padding-top: $fontSize20;
          margin: 0 $fontSize10;
          min-height: 16 * $fontSize10 + 6;
          border-top: 1px solid #eee;
        }
      }
      .couponList {
        .coupon {
          width: 19 * $fontSize10 + 6;
          height: 13 * $fontSize10 + 2;
          margin:0 $fontSize20 $fontSize20 0;
          cursor: pointer;
          @include border(2px,solid,$colorfff);
          &:nth-child(4n) {
            margin-right: 0;
          }
          .pic {
            width: 19 * $fontSize10 + 6;
            height: 9 * $fontSize10 + 4;
            background-image: url("../img/icons/coupon.png");
            background-position: 0 0;
            background-repeat: no-repeat;
          }
          .text {
            top: - $fontSize10 / 5;
            height: 4 * $fontSize10 - 2;
            border-top: 0 !important;
          }
          .rmb {
            top: - (8 * $fontSize10 - 5);
            left: 3 * $fontSize10 + 5;
            font-size: 3 * $fontSize10;
            color: $colorfff;
            span {
              vertical-align: top;
              font-size: 2 * $fontSize12;
            }
          }
          .timeLimit {
            bottom: 5 * $fontSize10;
            left: 2 * $fontSize16;
            font-size: $fontSize14;
            color: $colorfff;
          }
          .useLimit {
            bottom: $fontSize10;
            left: $fontSize12;
            width: 17 * $fontSize10;
            font-size: $fontSize12;
            color: $theme;
            text-align: center;
            line-height: $lineHeight;
          }
          .cancel {
            display: none;
            top: -(9 * $fontSize10 + 2);
            right: 0;
            width: 6 * $fontSize10 - 3;
            height: $fontSize20;
            background: url("../img/icons/del.png") no-repeat center;
            background-size: 100%;
          }
          .sure {
            display: none;
            bottom: - $fontSize10 / 5;
            right: 0;
            width: 3 * $fontSize10;
            height: 3 * $fontSize10;
            background: url("../img/icons/choose.png") no-repeat center;
            background-size: 100%;
          }
          &.active {
            border-color: #ed5d37;
            .pic {
              background-image: none;
            }
            .text {
              border: 0;
            }
            .cancel,.sure {
              display: block;
            }
          }
        }
      }
      .valid {
        .coupon {
          .pic.normal {
            background-color: $theme;
          }
          .text {
            @include border(1px,solid,$theme);
          }
        }
      }
      .invalid {
        .coupon {
          cursor: default;
          .pic.normal {
            background-color: #6f6f6f;
          }
          .text {
            @include border(1px,solid,#6f6f6f);
            > span {
              display: none;
            }
          }
          .useLimit {
            color: #6f6f6f;
          }
        }
      }
      .payBox {
        .emptyInfo {
          font-size: $fontSize14;
          color: $colorab;
          .icon {
            width: 10 * $fontSize10 + 1;
            height: 7 * $fontSize10;
            margin:5 * $fontSize10 auto $fontSize14 + 1;
            background: url("../img/icons/couponInfo.png") no-repeat center;
          }
          .tips {
            margin-bottom: 3 * $fontSize10;
          }
        }
      }
    }
    .submitOrder {
      margin-top: 3 * $fontSize10;
      .text {
        font-size: $fontSize14;
        color: $color111;
        line-height: $lineHeight;
        margin-bottom: $fontSize16 / 2;
      }
      .totalCount {
        color: $colorred;
        margin: 0 $fontSize12 / 4;
        font-weight: 700;
      }
      .minusPrice {
        margin-left: $fontSize12 / 2;
      }
      .totalPay {
        font-size: $fontSize20;
        color: $colorred;
        font-weight: 700;
      }
      .btn {
        width: 12 * $fontSize10;
        height: 4 * $fontSize10;
        line-height: 4 * $fontSize10;
        font-size: $fontSize16;
        color: $colorfff;
        margin: $fontSize10 / 2 0 $fontSize10;
        @include link-posColor($theme,$darkTheme);
      }
      .check {
        font-size: $fontSize14;
        color: $color666;
        label {
          cursor: pointer;
        }
        .checkedIcon {
          display: inline-block;
          width: $fontSize16;
          height: $fontSize16;
          margin:-($fontSize10 / 10) $fontSize12 / 3 0 0;
          vertical-align: top;
          background-image: url("../img/icons/yes.png");
          background-repeat: no-repeat;
          background-position: 0 0;
          &.cancel {
            background-position: 0 (- $fontSize16);
          }
        }
        .protocol {
          @include link-colors($theme,$darkTheme);
        }
      }
    }
  }
}
